<template>
  <cml-module :moduleName="$t('cmlpanel.weather')"
    icon="tianqi"
    v-bind="$attrs">
    <cml-module-item
        :title="cityName"
        v-bind="$attrs"
        v-on="$listeners"
    >
       <a-auto-complete
            v-model="value"
            style="width: 160px;border-bottom: 1px solid #cafff733;"
            placeholder="请输入城市名称"
            option-label-prop="value"
            @select="onSelect"
            @search="onSearch"
        >
          <template slot="dataSource">
            <a-select-option v-for="item in dataSource" :key="item.label" :value="item.label">
                <a-tooltip v-if="item.label.length > 9"  placement="top" :title="item.label" :overlayStyle="{zIndex: 100000,backgroundColor: 'rgba(0,0,0,.85)'}">
                  <span>{{item.label}}</span>
                </a-tooltip>
                <span>{{item.label}}</span>
            </a-select-option>
          </template>
       </a-auto-complete> 
    </cml-module-item>
    <cml-module-item
        :title="iconType"
        v-bind="$attrs"
        v-on="$listeners"
    >
       <a-select
        size="small"
        :value="weatherIconType"
        :options="options"
        style="width: 160px"
        @change="iconTypeChange"
      >
       </a-select>
    </cml-module-item>
  </cml-module>
</template>
<script>
import CmlModule from '../cml-module'
import * as anov from 'anov-core'
import CmlModuleItem from '../cml-module-item'
import { Select,  AutoComplete, Tooltip, Switch} from 'ant-design-vue'
export default {
  name: 'Weather',
  components: {
    CmlModule,
    CmlModuleItem,
    AAutoComplete: AutoComplete,
    ASelect: Select,
    ASelectOption: Select.Option,
    ATooltip: Tooltip,
    ASwitch: Switch
  },
  model: {},
  props: {},
  data() {
    return {
      value: '',
        dataSource: [],
        cityId: "",
        options: [],
        
    }
  },
  computed: {
    ...anov.envServer.mapState([ 'weatherIconType', 'city']),
    titleText() {
      return this.$t('cmlpanel.weatherStart')
    },
    cityName() {
      return this.$t('cmlpanel.cityName')
    },
    iconType(){
      return this.$t('cmlpanel.weatherIconType')
    }
  },
  watch: {
    weatherIconType(v, v1) {
      this.change(v)
    },
    city(v, v1){
      this.value = v
    }
  },
  created() {},
  mounted() {
    app.$once(app.EventType.ready, () => {
      this.getOptions()
    })
    this.value = this.city
  },
  beforeDestroy() {},
  methods: {
    onSelect(value){
      app.envServer.getWeather({city: value}).then(res => {
      })
    },
    onSearch(value){
      app.envServer.getCityidByName({city: value}).then(res => {
        let listOption = []
        res && res.map(item => {
          listOption.push({
            label: item.cityNameCn,
            value: item.cityId
          })
        })
        this.dataSource = listOption
      })
    },
    getOptions(){
      this.options = app.config.env.weatherIconOption
    },
    change(v){
      app.envServer.weatherIconType = v
    },
    iconTypeChange(value){
      if(value == this.weatherIconType) return 
      app.envServer.weatherIconType = value
    },
    getPopupContainer(trigger){
      return trigger.parentElement
    }
  }
}
</script>

